<template>
  <div class="main">
    <div class="serbox">
      <div class="left">
        <el-cascader :options="fenlei"
                     clearable
                     v-model="oneClassId"
                     @change="conId1"
                     :show-all-levels="false"
                     :props="props"></el-cascader>
        <div class="inp">
          <el-input placeholder="请输入搜索内容"
                    suffix-icon="el-icon-search"
                    v-model="searchText">
          </el-input>
        </div>
        <el-button type="primary"
                   style="margin-left:15px"
                   size="medium"
                   @click="search">查询</el-button>
      </div>
      <el-button type="primary"
                 @click="openpop">添加商品</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData"
                stripe
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         width="90">
        </el-table-column>
        <el-table-column label="商品图片">
          <template slot-scope="scope">
            <img :src="scope.row.imgurl"
                 style="width:111px;height:111px;">
          </template>
        </el-table-column>
        <el-table-column prop="name"
                         label="商品名称">
        </el-table-column>
        <el-table-column label="首页推荐">
          <template slot-scope="scope">
            <span>{{scope.row.recomSy==1?'推荐':'不推荐'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="详情推荐">
          <template slot-scope="scope">
            <span>{{scope.row.recomXq==1?'推荐':'不推荐'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="购物车推荐">
          <template slot-scope="scope">
            <span>{{scope.row.recomGwc==1?'推荐':'不推荐'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span :style="scope.row.disabled==0?'color:#1A69E0':'color:#D94511'">{{scope.row.disabled==0?'上架':'下架'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="gmtCreate"
                         label="时间"
                         width="170">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="chodel(scope.row)"
                       type="text"
                       style="color:red"
                       size="small">删除</el-button>
            <el-button @click="handleClick(scope.row,0)"
                       type="text"
                       style="color:#606266"
                       size="small">详情</el-button>
            <el-button @click="handleClick(scope.row,1)"
                       type="text"
                       style="color:#606266"
                       size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <div class="btns">
        <!-- <el-button type="primary">批量删除</el-button> -->
      </div>
      <el-pagination background
                     @current-change="changePage"
                     :current-page.sync="page"
                     :page-size="10"
                     layout="total,prev,pager,next,jumper"
                     :total="total">
      </el-pagination>
    </div>
    <!-- 弹框 -->
    <el-dialog title="商品信息"
               :visible.sync="outpop"
               v-if="outpop">
      <!-- 外层弹框 -->
      <div>
        <el-form :model="ruleForm"
                 :rules="rules"
                 ref="ruleForm"
                 label-width="130px"
                 class="demo-ruleForm">
          <el-form-item label="商品分类"
                        prop="classId">
            <el-cascader :options="fenlei"
                         v-model="ruleForm.classId"
                         @change="conId"
                         :show-all-levels="false"
                         :props="props"
                         :disabled="!isedit"></el-cascader>
          </el-form-item>
          <el-form-item label="商品类型"
                        prop="typeId">
            <el-select v-model="ruleForm.typeId"
                       placeholder="请选择商品类型"
                       @change="settype"
                       :disabled="!isedit">
              <el-option :label="item.name"
                         :value="item.id"
                         v-for="(item,index) in types"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称"
                        prop="name">
            <el-input v-model="ruleForm.name"
                      placeholder="请输入商品名称"
                      maxlength="20"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <!-- --图片start-- -->
          <el-form-item label="列表图片"
                        prop="bannerList">
            <el-upload :action="baseUrl+'/common/upload'"
                       class="imgbox"
                       :show-file-list="false"
                       list-type="picture-card"
                       :on-success="handleAvatarSuccess1"
                       :before-upload="beforeUpload"
                       :disabled="!isedit">
              <i slot="default"
                 class="el-icon-plus"
                 v-if="!ruleForm.imgurl"></i>
              <img :src="ruleForm.imgurl"
                   v-if="ruleForm.imgurl"
                   style="width:100%;height:100%;" />
            </el-upload>
          </el-form-item>
          <el-form-item label="轮播图"
                        prop="bannerList">
            <div class="alog-box">
              <div class="alog-img"
                   v-for="(item,index) in ruleForm.bannerList"
                   :key="index">
                <img :src="item.imgurl" />
                <div class="alog-shadow"
                     v-if="isedit">
                  <i class="el-icon-delete"
                     @click="handleRemove(index,1)"></i>
                </div>
              </div>
              <el-upload :action="baseUrl+'/common/upload'"
                         class="imgbox"
                         :multiple="true"
                         :show-file-list="false"
                         list-type="picture-card"
                         :on-success="handleAvatarSuccess2"
                         :before-upload="beforeUpload"
                         :disabled="!isedit"
                         v-if="isedit">
                <i slot="default"
                   class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item label="商品详情图"
                        prop="detailImgList">
            <div class="alog-box">
              <div class="alog-img"
                   v-for="(item,index) in ruleForm.detailImgList"
                   :key="index">
                <img :src="item.imgurl" />
                <div class="alog-shadow"
                     v-if="isedit">
                  <i class="el-icon-delete"
                     @click="handleRemove(index,2)"></i>
                </div>
              </div>
              <el-upload :action="baseUrl+'/common/upload'"
                         class="imgbox"
                         :multiple="true"
                         :show-file-list="false"
                         list-type="picture-card"
                         :on-success="handleAvatarSuccess3"
                         :before-upload="beforeUpload"
                         :disabled="!isedit"
                         v-if="isedit">
                <i slot="default"
                   class="el-icon-plus"></i>
              </el-upload>
            </div>
          </el-form-item>
          <!-- --图片end-- -->
          <el-form-item label="参数"
                        prop="param"
                        v-if="isedit">
            <el-button type="primary"
                       size="mini"
                       @click="setguige(2)">参数管理</el-button>
            <!-- <span style="padding-left:10px;">已选：{{ruleForm.productList&&ruleForm.productList.length>0?guige:'无'}}</span> -->
          </el-form-item>
          <el-form-item label="使用规格"
                        prop="hasSpec">
            <el-radio-group v-model="ruleForm.hasSpec"
                            v-if="!ruleForm.id">
              <el-radio :label="0">不使用规格</el-radio>
              <el-radio :label="1">使用规格</el-radio>
            </el-radio-group>
            <span v-if="ruleForm.id">{{ruleForm.hasSpec==1?'使用规格':'不使用规格'}}</span>
          </el-form-item>
          <el-form-item label="规格"
                        prop="productList"
                        v-if="ruleForm.hasSpec==1">
            <el-button type="primary"
                       size="mini"
                       v-if="isedit"
                       @click="setguige(1)">规格管理</el-button>
            <span style="padding-left:10px;">已选：{{ruleForm.productList&&ruleForm.productList.length>0?guige:'无'}}</span>
          </el-form-item>
          <el-form-item label="sku货号"
                        prop="sku"
                        v-if="ruleForm.hasSpec==0">
            <el-input v-model="ruleForm.sku"
                      placeholder="请输入sku货号"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <el-form-item label="价格"
                        prop="price"
                        v-if="ruleForm.hasSpec==0">
            <el-input v-model="ruleForm.price"
                      placeholder="请输入价格"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <el-form-item label="库存"
                        prop="stock"
                        v-if="ruleForm.hasSpec==0">
            <el-input v-model="ruleForm.stock"
                      placeholder="请输入库存"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <el-form-item label="状态"
                        prop="disabled">
            <el-radio-group v-model="ruleForm.disabled"
                            :disabled="!isedit">
              <el-radio :label="0">上架</el-radio>
              <el-radio :label="1">下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="运费"
                        prop="costMoney">
            <el-input v-model="ruleForm.costMoney"
                      placeholder="请输入运费"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <el-form-item label="商品介绍"
                        prop="title">
            <el-input type="textarea"
                      v-model="ruleForm.title"
                      maxlength="150"
                      placeholder="请输入商品介绍"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <el-form-item label="售后服务"
                        prop="afterSale">
            <el-input type="textarea"
                      v-model="ruleForm.afterSale"
                      placeholder="请输入售后服务"
                      maxlength="150"
                      :disabled="!isedit"></el-input>
          </el-form-item>
          <el-form-item label="是否开票"
                        prop="isInvoice">
            <el-radio-group v-model="ruleForm.isInvoice"
                            :disabled="!isedit">
              <el-radio :label="0">开票</el-radio>
              <el-radio :label="1">不开票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm('ruleForm')"
                       v-if="isedit">修 改</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-dialog width="50%"
                 title="规格信息"
                 :visible.sync="interpop"
                 append-to-body>
        <!-- 内层弹框 -->
        <div class="speclist"
             v-for="item in specList"
             :key="item.id">
          <span>{{item.spec.name}}</span>
          <div class="specR">
            <el-checkbox-group v-model="item.checkList">
              <el-checkbox :label="it"
                           v-for="it in item.specValList"
                           :key="it.id">{{it.specValText}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <el-button type="primary"
                   size="mini"
                   @click="shengcheng">生成规格表</el-button>
        <el-form inline
                 :rules="rules1"
                 class="splist"
                 :ref="'guiform'+index"
                 v-for="(item,index) in newList"
                 :key="index"
                 :model="item">
          <el-form-item prop="name">
            <span class="tit">{{item.name}}</span>
          </el-form-item>
          <el-form-item prop="sku">
            <el-input style="width:150px;margin-right:10px"
                      placeholder="请输入sku"
                      v-model="item.sku"></el-input>
          </el-form-item>
          <el-form-item prop="price">
            <el-input type="number"
                      placeholder="请输入价格"
                      v-model="item.price"
                      style="width:150px;margin-right:10px"
                      step="0.01"></el-input>
          </el-form-item>
          <el-form-item prop="stock">
            <el-input type="number"
                      placeholder="请输入库存"
                      v-model="item.stock"
                      style="width:150px"></el-input>
          </el-form-item>
          <el-form-item prop="name">
            <el-radio v-model="ruleForm.default"
                      :label="index"
                      @change="setdefault">默认</el-radio>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   @click="fixguige">确 定</el-button>
      </el-dialog>
      <el-dialog width="50%"
                 title="参数设置"
                 :visible="paramList&&paramList.length>0"
                 :before-close="beforeClose"
                 append-to-body>
        <el-form inline
                 class="splist"
                 :ref="'param'+index"
                 v-for="(item,index) in paramList"
                 :key="index"
                 :model="item">
          <el-form-item prop="name">
            <span class="tit">{{item.name}}</span>
          </el-form-item>
          <el-form-item prop="value">
            <el-input style="width:150px;margin-right:10px"
                      placeholder="请输入参数值"
                      maxlength="30"
                      v-model="item.value"
                      :disabled="!isedit"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary"
                   v-if="isedit"
                   @click="fixparam">确 定</el-button>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    var setprice = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入价格'));
      } else if (typeof value == 'number') {
        return callback()
      } else if (value.indexOf('.') == 0 || value.indexOf('.') == (value.length - 1)) {
        return callback(new Error('请输入正确格式的价格'));
      } else if (value.indexOf('.') > 0 && value.indexOf('.') < value.length - 3) {
        return callback(new Error('最多两位小数'));
      } else if (!(parseFloat(value) > 0)) {
        return callback(new Error('价格必须大于0'));
      } else {
        return callback()
      }
    }
    var setstock = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入价格'));
      } else if (typeof value == 'number') {
        return callback()
      } else if (value.indexOf('.') != -1) {
        return callback(new Error('库存必须是整数'));
      } else if (!(parseInt(value) >= 0)) {
        return callback(new Error('库存不能小于0'));
      } else {
        return callback()
      }
    }
    var setarr = (rule, value, callback) => {
      if (!(value && value.length > 0)) {
        return callback(new Error('请上传图片'));
      } else {
        return callback()
      }
    }
    var setproduct = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 0) {
        return callback()
      } else if (!(this.ruleForm.productList && this.ruleForm.productList.length > 0)) {
        return callback(new Error('请设置规格'));
      } else {
        return callback()
      }
    }
    var setsku1 = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 1) {
        return callback()
      } else if (typeof value == 'number') {
        return callback()
      } else if (!value) {
        return callback(new Error('请输入sku库号'));
      } else {
        return callback()
      }
    }
    var setprice1 = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 1) {
        return callback()
      } else {
        return setprice(rule, value, callback)
      }
    }
    var setstock1 = (rule, value, callback) => {
      if (this.ruleForm.hasSpec == 1) {
        return callback()
      } else {
        return setstock(rule, value, callback)
      }
    }
    var setcost = (rule, value, callback) => {
      if (value && parseInt(value) == 0) {
        return callback()
      } else {
        return setprice(rule, value, callback)
      }
    }
    return {
      choDate: "",
      searchText: "",
      list: [],
      fenlei: [],
      types: [],
      props: { label: 'name', value: 'id', children: 'childList' },
      tableData: [],
      page: 1,
      total: 0,
      outpop: false,
      interpop: false,
      ruleForm: { name: "", nav: "", radio: "" },
      rules: {
        classId: [{ required: true, message: '请选择商品分类', trigger: 'change' }],
        typeId: [{ required: true, message: '请选择商品类型', trigger: 'change' }],
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        bannerList: [{ validator: setarr, trigger: 'change' }],
        detailImgList: [{ validator: setarr, trigger: 'change' }],
        productList: [{ validator: setproduct, trigger: 'change' }],
        sku: [{ validator: setsku1, trigger: 'blur' }],
        price: [{ validator: setprice1, trigger: 'blur' }],
        stock: [{ validator: setstock1, trigger: 'blur' }],
        costMoney: [{ validator: setcost, trigger: 'blur' }],
        title: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
        afterSale: [{ required: true, message: '请输入商品介绍', trigger: 'blur' }],
      },
      rules1: {
        sku: [{ required: true, message: '请输入sku货号', trigger: 'blur' }],
        price: [{ validator: setprice, trigger: 'blur' }],
        stock: [{ validator: setstock, trigger: 'blur' }]
      },
      lunbolist: [], // 轮播图列表
      detailList: [], // 商品详情图列表
      checkList: [],
      specList: [],
      newList: [],
      baseUrl: '',
      oneClassId: "",
      spec: [],
      paramList: [],
      isedit: true
    }
  },
  mounted () {
    this.baseUrl = this.$baseUrl
    this.gettypes()
    this.getlist()
    this.getfenlei()
  },
  computed: {
    guige () {
      var a = '';
      if (this.ruleForm && this.ruleForm.productList && this.ruleForm.productList.length > 0) {
        this.ruleForm.productList.forEach(item => {
          a = a == '' ? a : (a + ' ')
          a = a + item.spec
        })
      }
      return a
    }
  },
  methods: {
    getlist () {
      this.$postRequest('/mall/goodsGoods/list', {
        shopId: sessionStorage.getItem('shopId'),
        pageSize: 10,
        pageNum: this.page,
        name: this.searchText,
        classId: this.oneClassId
      }).then(res => {
        this.tableData = res.rows;
        this.total = res.total
      })
    },
    gettypes () {
      this.$postRequest('/mall/goodsType/list', {
        shopId: sessionStorage.getItem('shopId')
      }).then(res => {
        this.types = res.rows
      })
    },
    getfenlei () {
      this.$getRequest('/mall/goodsClass/getAll', {}).then(res => {
        this.fenlei = res.data
      })
    },
    changePage (e) {
      this.getlist()
    },
    chodel (e) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postRequest('/mall/goodsGoods/remove', {
          id: e.id
        }).then(res => {
          this.$message.success('删除成功')
          this.getlist()
        })
      })
    },
    // 添加商品按钮
    openpop () {
      this.outpop = true;
      this.isedit = true;
      this.ruleForm = { hasSpec: 0, isInvoice: 1, disabled: 0, shopId: sessionStorage.getItem('shopId'), category: 0, param: '[]' }
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          var a = { ...this.ruleForm }
          if (a.hasSpec == 0) {
            a.productList = [{ sku: a.sku, price: a.price, stock: a.stock, name: '', spec: '', id: a.productList && a.productList[0] ? a.productList[0].id : '', isDefault: '1' }]
            a.spec = '[]'
          }
          if (!a.param) {
            a.param = '[]'
          }
          if (a.id) {
            this.$postRequest('/mall/goodsGoods/edit', a).then(res => {
              this.$message.success('修改成功')
              this.getlist()
              this.outpop = false
            })
          } else {
            var newtime = new Date().getTime()
            var maxtime = parseInt(sessionStorage.getItem('time'))
            if (maxtime && newtime < maxtime) {
            } else {
              sessionStorage.setItem('time', newtime + 2000)
              this.$postRequest('/mall/goodsGoods/add', a).then(res => {
                this.$message.success('添加成功')
                this.page = 1
                this.getlist()
                this.outpop = false
              })
            }
          }
        }
      });
    },
    // 文件上传前的钩子，数为上传的文件
    beforeUpload (file) {
      // 判断图片是否大于2M
      const isLt2M = file.size / 1024 / 1024 < 10;
      // 判断图片的类型
      const isJpg =
        file.type == "image/jpeg" ||
        file.type == "image/jpg" ||
        file.type == "image/png" ||
        file.type == "image/gif";
      if (!isJpg) {
        this.$message.error("只能上传jpg, jpeg, png, gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      }
      if (!this.isedit) {
        return false
      }
    },
    // 修改
    handleClick (row, type) {
      if (type == 0) {
        // 详情
        this.isedit = false;
      } else if (type == 1) {
        // 修改
        this.isedit = true;
      }
      this.$getRequest('/mall/goodsGoods/' + row.id, {}).then(res => {
        if (res.data.hasSpec == 0) {
          res.data.price = '' + res.data.productList[0].price
          res.data.sku = '' + res.data.productList[0].sku
          res.data.stock = '' + res.data.productList[0].stock
        }
        res.data.costMoney = '' + res.data.costMoney
        this.ruleForm = res.data
        this.outpop = true
      })
    },
    // 修改默认后强制更新视图
    setdefault () {
      this.$forceUpdate();
    },
    settype () {
      this.ruleForm.xiugai = true
    },
    conId (e) {
      if (typeof this.ruleForm.classId == 'object') {
        this.ruleForm.classId = this.ruleForm.classId[1]
      }
    },
    conId1 (e) {
      if (typeof this.oneClassId == 'object') {
        this.oneClassId = this.oneClassId[1]
      } else if (!this.oneClassId) {
        this.oneClassId = "";
      };
      // this.getlist();
    },
    // 确定规格表
    fixguige () {
      if (!this.newList || this.newList.length == 0) {
        this.$message.error('请至少选择一种规格')
      } else if (this.ruleForm.default == -1) {
        this.$message.error('请选择默认规格')
      } else {
        var flag = true
        for (var i = 0; i < this.newList.length; i++) {
          this.$refs['guiform' + i][0].validate((valid) => {
            if (!valid) {
              flag = false
            }
          })
        }
        if (flag) {
          var a = this.newList
          for (var i = 0; i < a.length; i++) {
            a[i].isDefault = this.ruleForm.default == i ? '1' : '0'
          }
          this.ruleForm.productList = a
          this.ruleForm.spec = JSON.stringify(this.spec)
          this.newList = []
          this.interpop = false
        }
      }
    },
    // 生成规格表
    shengcheng () {
      var a = [...this.specList]
      var arr = []
      var arr1 = []
      var arr2 = []
      console.log(a)
      if (!(a[1] && a[1].checkList && a[1].checkList.length > 0)) {
        a.splice(1, 2)
      }
      if (!(a[0] && a[0].checkList && a[0].checkList.length > 0)) {
        a.splice(0, 1)
      }
      if (a.length == 0) {
        this.$message.error('请至少选择一种规格')
        return
      } else if (a.length == 1) {
        var b = a[0].checkList
        var arrx = []
        b.forEach(item => {
          arr.push({ id: '', name: item.specValText, spec: a[0].spec.name + ':' + item.specValText })
          arrx.push({ specName: a[0].spec.name, specType: 0, specId: a[0].spec.id, specValueId: item.id, specValueName: item.specValText })
        })
        arr2.push({ specName: a[0].spec.name, specType: 0, specId: a[0].specId, specValues: arrx })
      } else if (a.length == 2) {
        var b = a[0].checkList
        var c = a[1].checkList
        var arrx = []
        b.forEach(item1 => {
          arrx.push({ specName: a[0].spec.name, specType: 0, specId: a[0].spec.id, specValueId: item1.id, specValueName: item1.specValText })
          c.forEach(item2 => {
            arr.push({ id: '', name: item1.specValText + ' ' + item2.specValText, spec: a[0].spec.name + ':' + item1.specValText + '*' + a[1].spec.name + ':' + item2.specValText })
          })
        })
        arr2.push({ specName: a[0].spec.name, specType: 0, specId: a[0].specId, specValues: arrx })
        arrx = []
        c.forEach(item => {
          arrx.push({ specName: a[1].spec.name, specType: 0, specId: a[1].spec.id, specValueId: item.id, specValueName: item.specValText })
        })
        arr2.push({ specName: a[1].spec.name, specType: 0, specId: a[1].specId, specValues: arrx })
      }
      this.newList = arr
      this.spec = arr2
      this.ruleForm.default = -1
    },
    // 1打开规格表 2打开参数表
    setguige (num) {
      if (this.ruleForm.typeId) {
        this.$getRequest('/mall/goodsType/' + this.ruleForm.typeId, {}).then(res => {
          if (num == 1) {
            var arr = res.data.typeSpecList
            for (var i = 0; i < arr.length; i++) {
              arr[i].checkList = []
            }
            var arr1 = this.ruleForm.productList
            if (arr1 && arr1.length > 0) {
              for (var i = 0; i < arr1.length; i++) {
                if (arr1[i].isDefault == '1') {
                  this.ruleForm.default = i;
                  break;
                }
              }
            } else {
              this.$message.error('该类型暂未添加参数')
            }
            this.newList = this.ruleForm.productList || []
            this.specList = res.data.typeSpecList
            this.interpop = true
          } else if (num == 2) {
            if (this.ruleForm.id && !this.ruleForm.xiugai) {
              this.paramList = JSON.parse(this.ruleForm.param)
              if (this.paramList.length == 0) {
                this.$message.error('该类型暂未添加参数')
              }
            } else {
              var arr = res.data.typeParamsList
              if (arr.length == 0) {
                this.$message.error('该类型暂未添加参数')
              } else {
                this.paramList = arr.map(item => {
                  return { name: item.name, value: '' }
                })
              }
            }
          }
        })
      } else {
        this.$message.error('请先选择商品类型')
      }
    },
    // 确定参数表
    fixparam () {
      this.ruleForm.param = JSON.stringify(this.paramList)
      this.paramList = []
    },
    // 关闭参数表
    beforeClose () {
      this.paramList = []
    },
    handleAvatarSuccess1 (response, file, fileList) {
      this.ruleForm.imgurl = response.msg
      this.setdefault()
    },
    handleAvatarSuccess2 (response, file, fileList) {   //上传图片成功
      if (this.ruleForm.bannerList) {
        this.ruleForm.bannerList.push({ imgurl: response.msg })
      } else {
        this.ruleForm.bannerList = [{ imgurl: response.msg }]
      }
      this.setdefault()
    },
    handleAvatarSuccess3 (response, file, fileList) {   //上传图片成功
      if (this.ruleForm.detailImgList) {
        this.ruleForm.detailImgList.push({ imgurl: response.msg })
      } else {
        this.ruleForm.detailImgList = [{ imgurl: response.msg }]
      }
      this.setdefault()
    },
    handleRemove (index, num) {  //删除图片
      if (num == 1) {
        this.ruleForm.bannerList.splice(index, 1)
      } else if (num == 2) {
        this.ruleForm.detailImgList.splice(index, 1)
      }
      this.setdefault()
    },
    search () {
      this.getlist();
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-table th > .cell,
/deep/ .el-table .cell {
  text-align: center;
}
/deep/ .el-button--primary {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #0655ce;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  background-color: #0655ce;
  border-color: #0655ce;
}
/deep/ .el-input.is-disabled .el-input__inner,
/deep/ .el-textarea.is-disabled .el-textarea__inner {
  color: #606266;
  background-color: #fff;
  cursor: default;
}
.main {
  margin: 20px;
  background: #fff;
  .serbox {
    height: 60px;
    padding: 0 20px;
    align-items: center;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eeeeee;
    .left {
      display: flex;
      .inp {
        margin-left: 20px;
      }
    }
  }
}
.table {
  border: 1px solid #eee;
  margin: 20px;
}
.page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  height: 60px;
}
.imgbox {
  // border: 1px solid red;
  /deep/ .el-upload--picture-card {
    width: 110px;
    height: 110px;
    line-height: 120px;
  }
  /deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 110px;
    height: 110px;
  }
}

.speclist {
  display: flex;
  margin-bottom: 20px;
  > span {
    display: inline-block;
    width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .specR {
    width: calc(100% - 80px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .sp-right {
      margin: 0 10px;
    }
  }
}
.splist {
  // border: 1px solid red;
  display: flex;
  align-items: center;
  margin: 20px 0;
  .tit {
    // border: 1px solid red;
    width: 80px;
  }
}
.alog-box {
  width: calc(100% - 100px);
  background: #fff;
  border: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.alog-img {
  margin-right: 10px;
}
.alog-img,
.alog-img > img {
  width: 111px;
  height: 111px;
  position: relative;
}
.alog-img .alog-shadow {
  width: 111px;
  height: 111px;
  background: rgba(0, 0, 0, 0.6);
  text-align: center;
  line-height: 111px;
  color: #fff;
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 0;
  transition: all 1s;
  opacity: 0;
}
.alog-img:hover .alog-shadow {
  opacity: 1;
}
.alog-shadow i {
  padding: 5px;
  cursor: pointer;
}
</style>